<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/templates/store.xhtml">
	<ui:define name="pageTitle">Catalogue</ui:define>
	<ui:define name="first"></ui:define>
	
	<ui:define name="body">
		<div class="catalogue-header">
			<div class="catalogue-header-foot">
				<div class="row">
					<div class="small-12 columns">
						<nav class="top-bar data-topbar catalog-topbar">
							<ul class="title-area">
								<li class="name">
									<h1>
										<a>768 rêves</a>
									</h1>
								</li>
								<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
							</ul>
							<section class="top-bar-section catalog-topbar-section">
							
								<!-- Left Nav Section -->
								<ul class="left">
									<li>
										<a href="/PresentationDream/pages/catalogue.jsf">Rêves de gloire</a>
									</li>
									<li>
										<a href="/PresentationDream/pages/catalogue.jsf">Voyages</a>
									</li>
									<li class="has-dropdown not-click">
									
										<a href="#">Sport</a>
										<ul class="dropdown">
											<li>
												<a href="/PresentationDream/pages/catalogue.jsf">Football</a>
											</li>
											<li>
												<a href="/PresentationDream/pages/catalogue.jsf">Jokari</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="/PresentationDream/pages/catalogue.jsf">Science-fiction</a>
									</li>
									<li>
										<a href="/PresentationDream/pages/catalogue.jsf">Historiques</a>
									</li>
									<li>
										<a href="/PresentationDream/pages/catalogue.jsf">Paix dans le monde</a>
									</li>
									<li>
										<a href="/PresentationDream/pages/catalogue.jsf">Coquins</a>
									</li>
								</ul>
								
								<!-- Right Nav Section -->
								<ul class="right"></ul>
							</section>
						</nav>
					</div>
				</div>
			</div>
		</div>

		<div class="catalogue-main">
			<div class="row">
				<div class="large-7 medium-6 small-12 columns">
					<div class="row">
						<div class="small-8 medium-6 big-4 small-centered columns">
							<label>Classement</label> <select>
								<option value="note">Par note</option>
								<option value="vendus">Les plus vendus</option>
								<option value="nouveaux">Les plus récents</option>
								<option value="cheap">Les moins chers</option>
							</select>
						</div>
					</div>
					<div class="casse-medium">
						<div class="row casse-medium catalogue-item">
							<div class="small-3 columns">
								<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
							</div>
							<div class="small-9 columns">
								<div class="row">
									<div class="small-8 columns">
										<label>Rêve tout doux</label>
									</div>
									<div class="small-4 columns"></div>
								</div>
								<div class="casse-small">
									<div class="row casse-small">
										<div class="small-8 columns">
											<label>9.99€</label>
										</div>
										<div class="small-4 columns">
											<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row casse-medium catalogue-item">
							<div class="small-3 columns">
								<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
							</div>
							<div class="small-9 columns">
								<div class="row">
									<div class="small-8 columns">
										<label>Rêve tout doux</label>
									</div>
									<div class="small-4 columns"></div>
								</div>
								<div class="casse-small">
									<div class="row casse-small">
										<div class="small-8 columns">
											<label>9.99€</label>
										</div>
										<div class="small-4 columns">
											<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row casse-medium catalogue-item">
							<div class="small-3 columns">
								<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
							</div>
							<div class="small-9 columns">
								<div class="row">
									<div class="small-8 columns">
										<label>Rêve tout doux</label>
									</div>
									<div class="small-4 columns"></div>
								</div>
								<div class="casse-small">
									<div class="row casse-small">
										<div class="small-8 columns">
											<label>9.99€</label>
										</div>
										<div class="small-4 columns">
											<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row casse-medium catalogue-item">
							<div class="small-3 columns">
								<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
							</div>
							<div class="small-9 columns">
								<div class="row">
									<div class="small-8 columns">
										<label>Rêve tout doux</label>
									</div>
									<div class="small-4 columns"></div>
								</div>
								<div class="casse-small">
									<div class="row casse-small">
										<div class="small-8 columns">
											<label>9.99€</label>
										</div>
										<div class="small-4 columns">
											<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row casse-medium">
							<div class="large-4 large-offset-8 columns">
								<a href="#" class="button radius tiny">Plus...</a>
							</div>
						</div>
					</div>
				</div>
				<div class="large-offset-1 large-4 medium-5 small-12 columns">
					<div class="row">
						<div class="small-12 medium-10 big-8 small-centered columns">
							<label>Votre liste de souhaits</label>
						</div>
					</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<img src="../img/reves/reve1.bmp" width="100" height="100"></img>
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="/PresentationDream/pages/ficheReve.jsf" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>

</html>